<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>地铁跑酷：躲避炸弹</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E40AF',
                        secondary: '#F59E0B',
                        accent: '#10B981',
                        danger: '#EF4444',
                        train: '#374151',
                        track: '#6B7280'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .game-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            }
            .character-shadow {
                filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.3));
            }
            .animate-run {
                animation: run 0.5s steps(2) infinite;
            }
            .animate-jump {
                animation: jump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .animate-slide {
                animation: slide 0.3s ease-out;
            }
            .animate-fall {
                animation: fall var(--fall-duration) linear forwards;
            }
            .animate-explode {
                animation: explode 0.5s ease-out forwards;
            }
            .animate-background {
                animation: scrollBackground 15s linear infinite;
            }
            .animate-city {
                animation: scrollCity 30s linear infinite;
            }
            .train-track {
                background: repeating-linear-gradient(
                    to right,
                    #4B5563,
                    #4B5563 10px,
                    #374151 10px,
                    #374151 20px
                );
            }
        }

        @keyframes run {
            0% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0); }
        }
        
        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-120px); }
        }
        
        @keyframes slide {
            0% { transform: translateX(0); }
            50% { transform: translateX(var(--slide-distance)); }
            100% { transform: translateX(0); }
        }
        
        @keyframes fall {
            0% { transform: translateY(-100px); opacity: 1; }
            100% { transform: translateY(100vh); opacity: 1; }
        }
        
        @keyframes explode {
            0% { transform: scale(0.5); opacity: 1; }
            50% { transform: scale(2); opacity: 0.8; }
            100% { transform: scale(3); opacity: 0; }
        }
        
        @keyframes scrollBackground {
            0% { background-position: 0 0; }
            100% { background-position: -1000px 0; }
        }
        
        @keyframes scrollCity {
            0% { background-position: 0 0; }
            100% { background-position: -2000px 0; }
        }
    </style>
</head>
<body class="bg-gray-900 min-h-screen font-sans text-white overflow-x-hidden touch-manipulation">
    <!-- 游戏容器 -->
    <div class="container mx-auto px-2 py-4 max-w-5xl">
        <!-- 游戏标题 -->
        <header class="text-center mb-3 animate-fade-in">
            <h1 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-yellow-400 mb-1">
                <i class="fa fa-bomb mr-2 text-red-500"></i>
                地铁跑酷：品尝 vs 吃
            </h1>
            <p class="text-gray-300 text-sm md:text-base">躲避炸弹 | 回答问题 | 学习中文</p>
        </header>

        <!-- 游戏状态面板 -->
        <div class="flex justify-between items-center mb-3 px-3 py-2 bg-gray-800/80 backdrop-blur-sm rounded-lg game-shadow text-sm md:text-base">
            <div class="flex items-center space-x-3">
                <span><i class="fa fa-signal text-blue-400 mr-1"></i> 关卡: <span id="level" class="font-bold">1</span>/2</span>
                <span><i class="fa fa-clock-o text-yellow-400 mr-1"></i> 时间: <span id="time" class="font-bold">0</span>秒</span>
            </div>
            <div>
                <span><i class="fa fa-star text-yellow-500 mr-1"></i> 得分: <span id="score" class="font-bold">0</span></span>
            </div>
        </div>

        <!-- 游戏区域 -->
        <div id="game-container" class="relative h-[400px] md:h-[500px] rounded-xl overflow-hidden game-shadow">
            <!-- 背景层 -->
            <div class="absolute inset-0">
                <!-- 夜空 -->
                <div class="absolute inset-0 bg-gradient-to-b from-gray-900 to-gray-800">
                    <!-- 星星 -->
                    <div class="absolute top-[10%] left-[20%] w-2 h-2 bg-white rounded-full animate-pulse"></div>
                    <div class="absolute top-[15%] left-[40%] w-1 h-1 bg-white rounded-full animate-pulse" style="animation-delay: 0.3s"></div>
                    <div class="absolute top-[8%] left-[70%] w-2 h-2 bg-white rounded-full animate-pulse" style="animation-delay: 0.7s"></div>
                    <div class="absolute top-[25%] left-[30%] w-1 h-1 bg-white rounded-full animate-pulse" style="animation-delay: 0.5s"></div>
                    <div class="absolute top-[20%] left-[60%] w-2 h-2 bg-white rounded-full animate-pulse" style="animation-delay: 0.9s"></div>
                    <div class="absolute top-[30%] left-[10%] w-1 h-1 bg-white rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
                </div>
                
                <!-- 远处城市剪影 -->
                <div class="absolute bottom-[35%] left-0 w-full h-[20%] bg-gray-800 opacity-70 animate-city bg-repeat-x" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"100\"><rect x=\"0\" y=\"40\" width=\"30\" height=\"60\" fill=\"%23374151\"/><rect x=\"40\" y=\"20\" width=\"20\" height=\"80\" fill=\"%23374151\"/><rect x=\"70\" y=\"50\" width=\"25\" height=\"50\" fill=\"%23374151\"/><rect x=\"110\" y=\"10\" width=\"30\" height=\"90\" fill=\"%23374151\"/><rect x=\"160\" y=\"30\" width=\"20\" height=\"70\" fill=\"%23374151\"/></svg>');"></div>
                
                <!-- 远处列车 -->
                <div class="absolute bottom-[30%] left-0 w-full h-[10%] animate-background bg-repeat-x" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"50\"><rect x=\"0\" y=\"0\" width=\"150\" height=\"50\" fill=\"%231F2937\"/><rect x=\"10\" y=\"10\" width=\"40\" height=\"30\" fill=\"%23374151\"/><rect x=\"60\" y=\"10\" width=\"40\" height=\"30\" fill=\"%23374151\"/><rect x=\"110\" y=\"10\" width=\"30\" height=\"30\" fill=\"%23374151\"/></svg>');"></div>
                
                <!-- 铁轨和列车顶部 (三条跑道) -->
                <div class="absolute bottom-0 left-0 w-full h-[30%]">
                    <!-- 轨道 -->
                    <div class="absolute bottom-0 left-0 w-full h-10 train-track"></div>
                    
                    <!-- 列车顶部 (三条跑道) -->
                    <div class="track h-[calc(100%-25px)] w-1/3 float-left bg-train border-r-2 border-gray-700 relative">
                        <div class="absolute top-0 left-0 w-full h-4 bg-track"></div>
                        <div class="absolute bottom-0 left-0 w-full h-4 bg-track"></div>
                    </div>
                    <div class="track h-[calc(100%-25px)] w-1/3 float-left bg-train border-r-2 border-gray-700 relative">
                        <div class="absolute top-0 left-0 w-full h-4 bg-track"></div>
                        <div class="absolute bottom-0 left-0 w-full h-4 bg-track"></div>
                    </div>
                    <div class="track h-[calc(100%-25px)] w-1/3 float-left bg-train relative">
                        <div class="absolute top-0 left-0 w-full h-4 bg-track"></div>
                        <div class="absolute bottom-0 left-0 w-full h-4 bg-track"></div>
                    </div>
                </div>
            </div>

            <!-- 角色 -->
            <div id="character" class="absolute bottom-[25px] left-1/2 transform -translate-x-1/2 w-14 h-20 md:w-16 md:h-24 character-shadow z-20 animate-run">
                <div class="w-full h-full flex items-center justify-center text-yellow-300 text-2xl md:text-3xl">🧒</div>
            </div>

            <!-- 障碍物容器 -->
            <div id="obstacles" class="absolute inset-0 pointer-events-none z-10"></div>
            
            <!-- 爆炸效果容器 -->
            <div id="explosions" class="absolute inset-0 pointer-events-none z-30"></div>

            <!-- 题目弹窗 (默认隐藏) -->
            <div id="question-modal" class="absolute inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 hidden animate-fade-in">
                <div class="bg-gray-800 rounded-2xl p-5 md:p-7 w-11/12 max-w-md animate-bounce-in border-2 border-yellow-500">
                    <h2 class="text-lg md:text-xl font-bold text-center mb-5 text-yellow-400" id="question-text">问题将在这里显示</h2>
                    <div class="flex flex-col gap-3">
                        <button id="answer-a" class="answer-btn py-3 px-4 bg-blue-900/50 hover:bg-blue-900 text-blue-300 font-bold rounded-lg transition-all duration-300 border-2 border-blue-500">
                            A. 吃
                        </button>
                        <button id="answer-b" class="answer-btn py-3 px-4 bg-red-900/50 hover:bg-red-900 text-red-300 font-bold rounded-lg transition-all duration-300 border-2 border-red-500">
                            B. 品尝
                        </button>
                    </div>
                    <div class="mt-3 text-center text-xs md:text-sm text-gray-400">
                        按 <span class="bg-gray-700 px-2 py-1 rounded">A</span> 或 <span class="bg-gray-700 px-2 py-1 rounded">B</span> 键选择答案
                    </div>
                </div>
            </div>

            <!-- 开始界面 -->
            <div id="start-screen" class="absolute inset-0 bg-black/70 backdrop-blur-sm flex flex-col items-center justify-center z-40">
                <div class="text-center bg-gray-800 p-6 md:p-8 rounded-2xl max-w-md w-11/12 animate-bounce-in border-2 border-yellow-500">
                    <h2 class="text-xl md:text-2xl font-bold text-yellow-400 mb-3">准备好了吗？</h2>
                    <p class="mb-5 text-gray-300 text-sm md:text-base">躲避掉落的炸弹，同时学习"品尝"和"吃"的区别！</p>
                    <div class="mb-5 text-left text-gray-300 text-sm">
                        <p><i class="fa fa-hand-o-left text-gray-400 mr-2"></i> 向左滑动 - 左移跑道</p>
                        <p><i class="fa fa-hand-o-right text-gray-400 mr-2"></i> 向右滑动 - 右移跑道</p>
                        <p><i class="fa fa-hand-o-up text-gray-400 mr-2"></i> 向上滑动 / 空格 - 跳跃</p>
                    </div>
                    <button id="start-btn" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 w-full">
                        开始游戏 <i class="fa fa-play ml-1"></i>
                    </button>
                </div>
            </div>

            <!-- 结束界面 (默认隐藏) -->
            <div id="end-screen" class="absolute inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-40 hidden">
                <div class="text-center bg-gray-800 p-6 md:p-8 rounded-2xl max-w-md w-11/12 animate-bounce-in border-2 border-yellow-500">
                    <h2 id="end-title" class="text-xl md:text-2xl font-bold mb-3"></h2>
                    <p id="end-message" class="mb-5 text-gray-300 text-sm md:text-base"></p>
                    <p class="mb-5 text-lg font-bold text-yellow-400">最终得分: <span id="final-score">0</span></p>
                    <button id="restart-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 w-full">
                        再玩一次 <i class="fa fa-refresh ml-1"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端控制按钮 -->
            <div class="absolute bottom-4 left-0 right-0 flex justify-between px-4 z-30 md:hidden">
                <button id="left-btn" class="w-14 h-14 bg-gray-800/50 backdrop-blur-sm rounded-full flex items-center justify-center text-white text-xl border border-gray-600">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <button id="jump-btn" class="w-14 h-14 bg-gray-800/50 backdrop-blur-sm rounded-full flex items-center justify-center text-white text-xl border border-gray-600">
                    <i class="fa fa-arrow-up"></i>
                </button>
                <button id="right-btn" class="w-14 h-14 bg-gray-800/50 backdrop-blur-sm rounded-full flex items-center justify-center text-white text-xl border border-gray-600">
                    <i class="fa fa-arrow-right"></i>
                </button>
            </div>

            <!-- 提示信息 -->
            <div id="message" class="absolute top-4 left-1/2 transform -translate-x-1/2 bg-gray-800/90 backdrop-blur-sm px-4 py-2 rounded-full text-white font-medium hidden z-30 animate-bounce-in text-sm md:text-base border border-gray-700">
                提示信息
            </div>
        </div>

        <!-- 游戏说明 -->
        <div class="mt-4 bg-gray-800 rounded-xl p-4 game-shadow text-sm text-gray-300">
            <h3 class="text-lg font-bold text-yellow-400 mb-2">游戏说明</h3>
            <ul class="list-disc list-inside space-y-1">
                <li>在三条列车顶部跑道间移动，躲避掉落的炸弹</li>
                <li>坚持时间越长得分越高</li>
                <li>每15秒会出现一个关于"品尝"和"吃"的问题</li>
                <li>第一题正确答案是A，第二题是B</li>
                <li>选择正确答案才能继续游戏，答错会失败</li>
                <li>碰到炸弹会立即失败</li>
                <li>通过两关即可完成挑战</li>
            </ul>
        </div>
    </div>

    <script>
        // 游戏元素
        const gameContainer = document.getElementById('game-container');
        const character = document.getElementById('character');
        const obstaclesContainer = document.getElementById('obstacles');
        const explosionsContainer = document.getElementById('explosions');
        const questionModal = document.getElementById('question-modal');
        const questionText = document.getElementById('question-text');
        const answerA = document.getElementById('answer-a');
        const answerB = document.getElementById('answer-b');
        const startScreen = document.getElementById('start-screen');
        const endScreen = document.getElementById('end-screen');
        const endTitle = document.getElementById('end-title');
        const endMessage = document.getElementById('end-message');
        const finalScore = document.getElementById('final-score');
        const startBtn = document.getElementById('start-btn');
        const restartBtn = document.getElementById('restart-btn');
        const levelDisplay = document.getElementById('level');
        const timeDisplay = document.getElementById('time');
        const scoreDisplay = document.getElementById('score');
        const messageDisplay = document.getElementById('message');
        const leftBtn = document.getElementById('left-btn');
        const rightBtn = document.getElementById('right-btn');
        const jumpBtn = document.getElementById('jump-btn');

        // 游戏状态
        let gameState = {
            isRunning: false,
            isJumping: false,
            isSliding: false,
            score: 0,
            time: 0,
            level: 1,
            obstacleInterval: null,
            timeInterval: null,
            questionTimer: 0,
            currentQuestion: null,
            gameDuration: 0,
            questionsAsked: 0
        };

        // 跑道和角色属性
        const tracks = {
            count: 3,
            current: 2, // 从中间跑道开始 (1-3)
            positions: [] // 会在初始化时计算
        };

        const characterProps = {
            width: 56,
            height: 80,
            jumpHeight: 120,
            speed: 5
        };

        // 题目数据 - 确保第一题答案A，第二题答案B
        const questions = [
            {
                text: "1. 上课快迟到了，我急匆匆（）了一片面包就出发了。",
                options: ["吃", "品尝"],
                correct: "A"
            },
            {
                text: "2. 我在咖啡馆细细（）着美味的蛋糕。",
                options: ["吃", "品尝"],
                correct: "B"
            }
        ];

        // 初始化游戏
        function initGame() {
            // 计算跑道位置
            const containerWidth = gameContainer.clientWidth;
            tracks.positions = [];
            for (let i = 1; i <= tracks.count; i++) {
                tracks.positions.push(containerWidth * (i / (tracks.count + 1)));
            }
            
            // 重置游戏状态
            gameState = {
                isRunning: false,
                isJumping: false,
                isSliding: false,
                score: 0,
                time: 0,
                level: 1,
                obstacleInterval: null,
                timeInterval: null,
                questionTimer: 0,
                currentQuestion: null,
                gameDuration: 0,
                questionsAsked: 0
            };
            
            tracks.current = 2; // 从中间跑道开始
            
            // 重置UI
            character.style.left = `${tracks.positions[tracks.current - 1]}px`;
            character.style.bottom = '25px';
            obstaclesContainer.innerHTML = '';
            explosionsContainer.innerHTML = '';
            levelDisplay.textContent = '1';
            timeDisplay.textContent = '0';
            scoreDisplay.textContent = '0';
            endScreen.classList.add('hidden');
            startScreen.classList.remove('hidden');
            
            // 重置触摸滑动变量
            touchStartX = 0;
            touchStartY = 0;
        }

        // 开始游戏
        function startGame() {
            startScreen.classList.add('hidden');
            gameState.isRunning = true;
            
            // 启动计时器
            gameState.timeInterval = setInterval(updateTime, 1000);
            
            // 开始生成障碍物
            spawnObstacle();
            gameState.obstacleInterval = setInterval(spawnObstacle, 1500);
        }

        // 更新游戏时间
        function updateTime() {
            gameState.time++;
            gameState.gameDuration++;
            gameState.questionTimer++;
            timeDisplay.textContent = gameState.time;
            
            // 增加分数
            gameState.score += 10;
            scoreDisplay.textContent = gameState.score;
            
            // 检查是否该显示问题 (每15秒)
            if (gameState.questionTimer >= 15 && gameState.questionsAsked < questions.length) {
                showQuestion();
            }
            
            // 检查是否升级
            if (gameState.gameDuration >= 20 && gameState.level === 1) {
                gameState.level = 2;
                levelDisplay.textContent = '2';
                showMessage('进入第二关！炸弹掉落更快了！');
                
                // 增加难度 - 炸弹掉落更快
                clearInterval(gameState.obstacleInterval);
                gameState.obstacleInterval = setInterval(spawnObstacle, 1000);
            }
            
            // 检查是否通关
            if (gameState.gameDuration >= 40 && gameState.level === 2) {
                endGame(true);
            }
        }

        // 生成障碍物 (炸弹)
        function spawnObstacle() {
            if (!gameState.isRunning) return;
            
            const obstacle = document.createElement('div');
            const obstacleSize = Math.random() * 10 + 40; // 40-50px
            const trackIndex = Math.floor(Math.random() * tracks.count); // 随机跑道
            const containerWidth = gameContainer.clientWidth;
            const xPos = tracks.positions[trackIndex];
            
            // 随机炸弹类型
            const bombTypes = ['💣', '🔥', '🧨', '💥'];
            const randomType = bombTypes[Math.floor(Math.random() * bombTypes.length)];
            
            obstacle.className = 'absolute flex items-center justify-center z-10';
            obstacle.style.width = `${obstacleSize}px`;
            obstacle.style.height = `${obstacleSize}px`;
            obstacle.style.left = `${xPos}px`;
            obstacle.style.transform = 'translateX(-50%)';
            obstacle.style.top = '-50px';
            obstacle.style.fontSize = `${obstacleSize * 0.8}px`;
            obstacle.textContent = randomType;
            obstacle.dataset.track = trackIndex + 1;
            
            obstaclesContainer.appendChild(obstacle);
            
            // 设置掉落速度 (随关卡增加)
            const duration = gameState.level === 1 ? (Math.random() * 1 + 1.5) : (Math.random() * 0.7 + 1);
            obstacle.style.setProperty('--fall-duration', `${duration}s`);
            obstacle.classList.add('animate-fall');
            
            // 一段时间后移除未碰撞的炸弹
            setTimeout(() => {
                if (obstacle.parentNode) {
                    obstacle.parentNode.removeChild(obstacle);
                }
            }, duration * 1000);
        }

        // 显示爆炸效果
        function showExplosion(x, y) {
            const explosion = document.createElement('div');
            explosion.className = 'absolute flex items-center justify-center text-yellow-500 animate-explode';
            explosion.style.left = `${x}px`;
            explosion.style.top = `${y}px`;
            explosion.style.transform = 'translate(-50%, -50%)';
            explosion.style.fontSize = '40px';
            explosion.textContent = '💥';
            
            explosionsContainer.appendChild(explosion);
            
            // 移除爆炸效果
            setTimeout(() => {
                if (explosion.parentNode) {
                    explosion.parentNode.removeChild(explosion);
                }
            }, 500);
        }

        // 显示题目
        function showQuestion() {
            // 暂停游戏
            gameState.isRunning = false;
            clearInterval(gameState.obstacleInterval);
            
            // 暂停所有炸弹动画
            const obstacles = obstaclesContainer.querySelectorAll('div');
            obstacles.forEach(obstacle => {
                obstacle.style.animationPlayState = 'paused';
            });
            
            // 按顺序显示题目
            gameState.currentQuestion = questions[gameState.questionsAsked];
            gameState.questionsAsked++;
            
            // 更新题目UI
            questionText.textContent = gameState.currentQuestion.text;
            answerA.textContent = `A. ${gameState.currentQuestion.options[0]}`;
            answerB.textContent = `B. ${gameState.currentQuestion.options[1]}`;
            
            // 显示题目弹窗
            questionModal.classList.remove('hidden');
            
            // 重置问题计时器
            gameState.questionTimer = 0;
        }

        // 检查答案
        function checkAnswer(selectedAnswer) {
            if (!gameState.currentQuestion) return;
            
            const isCorrect = selectedAnswer === gameState.currentQuestion.correct;
            
            // 隐藏题目弹窗
            questionModal.classList.add('hidden');
            
            if (isCorrect) {
                // 正确 - 继续游戏
                gameState.score += 100;
                showMessage('正确！真棒！');
                scoreDisplay.textContent = gameState.score;
                
                // 恢复游戏
                gameState.isRunning = true;
                
                // 恢复所有炸弹动画
                const obstacles = obstaclesContainer.querySelectorAll('div');
                obstacles.forEach(obstacle => {
                    obstacle.style.animationPlayState = 'running';
                });
                
                gameState.obstacleInterval = setInterval(spawnObstacle, gameState.level === 1 ? 1500 : 1000);
            } else {
                // 错误 - 游戏结束
                showMessage('答案错误！游戏结束');
                setTimeout(() => {
                    endGame(false, '答错问题了！再试一次吧！');
                }, 1000);
            }
        }

        // 显示提示信息
        function showMessage(text) {
            messageDisplay.textContent = text;
            messageDisplay.classList.remove('hidden');
            
            setTimeout(() => {
                messageDisplay.classList.add('hidden');
            }, 2000);
        }

        // 切换跑道
        function changeTrack(direction) {
            if (!gameState.isRunning || gameState.isJumping || gameState.isSliding) return;
            
            const newTrack = direction === 'left' ? tracks.current - 1 : tracks.current + 1;
            
            // 检查是否在有效跑道范围内
            if (newTrack >= 1 && newTrack <= tracks.count) {
                gameState.isSliding = true;
                
                // 设置滑动动画
                const slideDistance = direction === 'left' ? '-80px' : '80px';
                character.style.setProperty('--slide-distance', slideDistance);
                character.classList.add('animate-slide');
                
                // 更新跑道位置
                tracks.current = newTrack;
                character.style.left = `${tracks.positions[tracks.current - 1]}px`;
                
                // 移除动画类
                setTimeout(() => {
                    character.classList.remove('animate-slide');
                    gameState.isSliding = false;
                }, 300);
            }
        }

        // 角色跳跃
        function jump() {
            if (!gameState.isRunning || gameState.isJumping) return;
            
            gameState.isJumping = true;
            character.classList.add('animate-jump');
            
            setTimeout(() => {
                character.classList.remove('animate-jump');
                gameState.isJumping = false;
            }, 600);
        }

        // 碰撞检测
        function checkCollision() {
            if (!gameState.isRunning) {
                requestAnimationFrame(checkCollision);
                return;
            }
            
            const characterRect = character.getBoundingClientRect();
            const obstacles = obstaclesContainer.querySelectorAll('div');
            
            for (const obstacle of obstacles) {
                const obstacleRect = obstacle.getBoundingClientRect();
                
                // 精确碰撞检测
                if (
                    characterRect.right > obstacleRect.left + 5 &&
                    characterRect.left < obstacleRect.right - 5 &&
                    characterRect.bottom > obstacleRect.top + 5 &&
                    characterRect.top < obstacleRect.bottom - 5
                ) {
                    // 发生碰撞 - 显示爆炸效果
                    const x = obstacleRect.left + obstacleRect.width / 2;
                    const y = obstacleRect.top + obstacleRect.height / 2;
                    showExplosion(x, y);
                    
                    // 移除障碍物
                    if (obstacle.parentNode) {
                        obstacle.parentNode.removeChild(obstacle);
                    }
                    
                    // 游戏结束
                    endGame(false, '碰到炸弹了！');
                    return;
                }
            }
            
            // 继续检测
            requestAnimationFrame(checkCollision);
        }

        // 结束游戏
        function endGame(isVictory, customMessage = null) {
            gameState.isRunning = false;
            clearInterval(gameState.timeInterval);
            clearInterval(gameState.obstacleInterval);
            
            // 停止所有动画
            const obstacles = obstaclesContainer.querySelectorAll('div');
            obstacles.forEach(obstacle => {
                obstacle.style.animation = 'none';
            });
            
            // 更新结束界面
            if (isVictory) {
                endTitle.textContent = '恭喜通关！';
                endTitle.className = 'text-xl md:text-2xl font-bold mb-3 text-green-400';
                endMessage.textContent = '你成功掌握了"品尝"和"吃"的区别！';
            } else {
                endTitle.textContent = '游戏结束';
                endTitle.className = 'text-xl md:text-2xl font-bold mb-3 text-red-400';
                endMessage.textContent = customMessage || '发生了错误！再试一次吧！';
            }
            
            finalScore.textContent = gameState.score;
            endScreen.classList.remove('hidden');
        }

        // 触摸控制变量
        let touchStartX = 0;
        let touchStartY = 0;

        // 事件监听 - 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') {
                changeTrack('left');
            } else if (e.key === 'ArrowRight') {
                changeTrack('right');
            } else if (e.key === ' ' || e.key === 'ArrowUp') {
                jump();
            } else if (e.key.toUpperCase() === 'A' && !gameState.isRunning && questionModal.classList.contains('hidden') === false) {
                checkAnswer('A');
            } else if (e.key.toUpperCase() === 'B' && !gameState.isRunning && questionModal.classList.contains('hidden') === false) {
                checkAnswer('B');
            }
        });

        // 事件监听 - 触摸控制
        gameContainer.addEventListener('touchstart', (e) => {
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
        }, false);

        gameContainer.addEventListener('touchmove', (e) => {
            e.preventDefault(); // 防止页面滚动
        }, false);

        gameContainer.addEventListener('touchend', (e) => {
            if (!gameState.isRunning && questionModal.classList.contains('hidden') === false) {
                // 在答题界面不响应滑动
                return;
            }
            
            if (!gameState.isRunning) return;
            
            const touchEndX = e.changedTouches[0].clientX;
            const touchEndY = e.changedTouches[0].clientY;
            
            const diffX = touchEndX - touchStartX;
            const diffY = touchEndY - touchStartY;
            
            // 检测滑动方向
            if (Math.abs(diffX) > Math.abs(diffY)) {
                // 水平滑动
                if (diffX > 50) {
                    changeTrack('right');
                } else if (diffX < -50) {
                    changeTrack('left');
                }
            } else {
                // 垂直滑动
                if (diffY < -50) {
                    jump();
                }
            }
        }, false);

        // 按钮事件
        startBtn.addEventListener('click', startGame);
        restartBtn.addEventListener('click', initGame);
        answerA.addEventListener('click', () => checkAnswer('A'));
        answerB.addEventListener('click', () => checkAnswer('B'));
        
        // 移动端控制按钮
        leftBtn.addEventListener('click', () => changeTrack('left'));
        rightBtn.addEventListener('click', () => changeTrack('right'));
        jumpBtn.addEventListener('click', jump);

        // 窗口大小变化时调整游戏
        window.addEventListener('resize', () => {
            // 重新计算跑道位置
            const containerWidth = gameContainer.clientWidth;
            tracks.positions = [];
            for (let i = 1; i <= tracks.count; i++) {
                tracks.positions.push(containerWidth * (i / (tracks.count + 1)));
            }
            
            // 调整角色位置
            character.style.left = `${tracks.positions[tracks.current - 1]}px`;
        });

        // 开始碰撞检测
        requestAnimationFrame(checkCollision);

        // 初始化游戏
        initGame();
    </script>
</body>
</html>
